<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>html-camera</title>
  <style>
    .main {
      margin: 10px auto;
      width: 230px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #f5f5f5;
      background: green;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="main" class="main">点我吧：一般打印</div>
  <div id="main1" class="main">点我吧：多dom打印</div>
  <div id="main2" class="main">点我吧：多dom分页打印</div>
  <div id="main3" class="main">点我吧：多dom分页组合打印</div>
  <!-- IE浏览器引用，以保证Promise -->
  <script src="https://cdn.bootcss.com/bluebird/3.5.1/bluebird.min.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  <script src="html-camera.js"></script>
  <script>
    var me = document.querySelector('#main');
    var me1 = document.querySelector('#main1');
    var me2 = document.querySelector('#main2');
    var me3 = document.querySelector('#main3');

    me.onclick = function () {
      htmlCamera(me);
    };
    me1.onclick = function () {
      htmlCamera([me1, me1, me1]);
    };
    me2.onclick = function () {
      htmlCamera([me2, [me2, me2, me2], me2], {
        split: [0, 1]
      });
    };
    me3.onclick = function () {
      htmlCamera([me3, [[me3, me3], me3], me3], {
        split: [0, 1]
      });
    };
  </script>
</body>

</html>